<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用队列渲染数据</title>
</head>
<body>
    <script>
        class JiaDian{
            ajax(type){
                let url = "http://localhost:8008/index.php/api/home/getJiaDianList?type=";
                return new Promise((resolve,reject) => {
                    if(!/^http/.test(url)){
                        throw new ParamError("请求地址格式错误");
                    }

                    let xhr = new XMLHttpRequest();
                    xhr.open("GET",`${url}${type}`);
                    xhr.send();
                    xhr.onload = function(){
                        if(this.status == 200){
                            resolve(JSON.parse(this.response));
                        }else if(this.status == 404){
                            reject(new HttpError("请求参数错误"));
                        }else{
                            reject("加载失败");
                        }
                    };
                    xhr.onerror = function (){
                        reject(this);
                    }
                })
            }
            render(param){
                param.reduce((promise,n) => {
                    return promise
                    .then(
                        value => {
                            return this.ajax(n);
                        }
                    )
                    .then(
                        value => {
                            return this.view(value)
                        }
                    )
                },Promise.resolve())
            }
            view(jiaDianList){
                return new Promise((resolve,reject) => {
                    const p = document.createElement('p');
                    p.innerHTML = jiaDianList['jiaDianList'][0]['name'];
                    document.body.appendChild(p);
                    resolve();
                })
            }
        }

        new JiaDian().render([1,2,3])
    </script>
</body>
</html>